<template>
  <view class="p-cinema">
    <CHeader :title="title" :show="showHeader" class="c-header"></CHeader>
    <view class="p-cinema-bg"> </view>
    <view class="p-cinema-content">
      <view class="cinema-info">
        <view class="cinema-name">艺达国际影城（广州天河员宫店）</view>
        <view class="cinema-addr">广园东路智慧park博汇街6号C栋三楼</view>
        <view class="cinema-local">
          <nut-icon name="location2" color="black" size="14"></nut-icon>
          距您800m
        </view>
      </view>
      <view class="cinema-local-bg"></view>
      <view class="vip-card">
        <view class="vip-info">
          <view class="vip-name">影城卡</view>
          <view class="vip-desc">开卡首张减3元</view>
          <text class="buy-vip">¥9.9购</text>
        </view>
        <view class="vip-card-bg"></view>
      </view>
      <view class="movie-wrap">
        <USwiper :list="movieList" height="280" name="posterUrl" img-mode="scaleToFill" @change="selectMovie" @click="selectMovie" :current="currentMovie"></USwiper>
        <view class="movie-info">
          <view class="movie-name">长津湖之水门桥 <text class="grade">暂无评分</text></view>
          <view class="movie-desc">106分钟/剧情|历史|战争/吴京 易烊千玺 段奕宏 张涵予 朱亚文 </view>
        </view>
      </view>
    </view>
    <CTabs @changeTab="changeTab" :tabs_text="['今天 7月10日', '明天 7月11日']"></CTabs>

    <view class="play-schedule">
      <view class="play-schedule-item" v-for="item in 20" :key="item">
        <view class="schedule-row">
          <view class="row-1 row-num show-time">12:50</view>
          <view class="row-2">14:50 散</view>
        </view>
        <view class="schedule-row">
          <view class="row-1">国语 2D</view>
          <view class="row-2">2号厅</view>
        </view>
        <view class="schedule-row">
          <view class="row-1 row-num price">
            <text class="vip-text">VIP</text>
            29.9元
          </view>
          <view class="row-2">原价35元</view>
        </view>
        <view class="sold-btn" @click.stop="go2buy">购票</view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import Taro, { usePageScroll } from '@tarojs/taro'
import CTabs from '@/components/c-tabs'
import CHeader from '@/components/c-header'
import USwiper from '@/components/u-swiper'

const title = ref('艺达国际影城（广州天河员宫店）')
const bg = ref('https://bkimg.cdn.bcebos.com/pic/b7fd5266d0160924ab1887db615422fae6cd7a899eea?x-bce-process=image/resize,m_lfit,w_536,limit_1/format,f_jpg')

const movieList = ref([
  {
    movieId: 12343,
    duration: 149,
    movieType: '剧情|历史|战争',
    cast: '吴京 易烊千玺 段奕宏 张涵予 朱亚文',
    movieName: '长津湖之水门桥',
    posterUrl: 'https://gw.alicdn.com/i1/O1CN01sSmj2b1daSm6IAUcs_!!6000000003752-0-alipicbeacon.jpg_480x480Q30s150.jpg'
  },
  {
    cast: '易烊千玺 田雨 陈哈琳 齐溪 公磊 许君聪 王宁 黄尧 巩金国',
    duration: 106,
    movieId: 147885,
    movieName: '奇迹·笨小孩',
    movieType: '剧情',
    posterUrl: 'https://gw.alicdn.com/i1/O1CN013Ggc2s1Z8HwrwxAfn_!!6000000003149-0-alipicbeacon.jpg_480x480Q30s150.jpg'
  }
])

const currentMovie = ref(0)
const selectMovie = e => {
  if (!isNaN(e) && currentMovie.value != e) {
    currentMovie.value = e
    // TODO select MOVIE
    // console.log(movieList.value[e])
  }
}

const changeTab = e => {
  console.log(e)
}
const showHeader = ref(false)
usePageScroll(res => {
  showHeader.value = res.scrollTop > 58 ? true : false
})

const go2buy = () => {
  Taro.navigateTo({
    url: '/pages/cinema-seat/index'
  })
}
</script>

<style lang="scss">
@import '@/assets/styles/custom_theme.scss';
.p-cinema {
  .c-header {
    position: fixed;
  }
  .p-cinema-bg {
    width: 100%;
    height: 120px;
    background-image: url(../../assets/image/bg.jpg);
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
  }
  .p-cinema-content {
    position: relative;
    margin-top: -20px;
    min-height: 398px;
    padding: 14px;
    box-sizing: border-box;
    border-radius: 12px;
    background: white;
    overflow: hidden;
    .cinema-info {
      position: relative;
      z-index: 2;
      .cinema-name {
        font-size: 16px;
        font-weight: bold;
        line-height: 28px;
        color: $title-color;
      }
      .cinema-addr {
        font-size: 12px;
        color: $text-color;
      }

      .cinema-local {
        position: absolute;
        top: 0;
        right: 0;
        height: 50px;

        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        font-size: 10px;
        color: $text-color;
      }
    }
    .cinema-local-bg {
      width: 161px;
      height: 76px;
      content: ' ';
      position: absolute;
      top: 0;
      right: 0;
      background-image: url(../../assets/image/location.bg.png);
      background-size: 100%;
      background-position: center;
      background-repeat: no-repeat;
      z-index: 1;
    }
    .vip-card {
      padding: 20px 0;
      .vip-info {
        position: relative;
        display: flex;
        align-items: center;
        padding: 10px 12px;
        border-radius: 4px;
        box-sizing: border-box;
        border: solid 1px #f1fafb;
        background: #f1fefb;
        z-index: 2;
        .vip-name {
          font-size: 13px;
          font-weight: bold;
          color: $title-color;
          line-height: 13px;
          padding-right: 6px;
          border-right: solid 1px $line-color;
        }
        .vip-desc {
          padding-left: 6px;
          font-size: 11px;
          color: $title-color2;
        }
        .buy-vip {
          position: absolute;
          right: 12px;
          padding: 1px 6px;
          font-size: 11px;
          font-weight: bold;
          color: #4eb192;
          border-radius: 12px;
          background-color: #c6f6e7;
          &:first-letter {
            font-size: 12px;
            margin-right: 1px;
          }
        }
      }
      .vip-card-bg {
        content: ' ';
        margin-top: 6px;
        width: 100%;
        height: 9px;
        background-image: url(../../assets/image/box.shadow.png);
        background-size: 100%;
        background-position: center;
        background-repeat: no-repeat;
      }
    }
    .movie-wrap {
      position: absolute;
      left: 0;
      right: 0;
      margin: 12px 0;
      .movie-info {
        width: 100%;
        text-align: center;
        margin: 20px 0;
        .movie-name {
          font-size: 15px;
          font-weight: bold;
          line-height: 28px;
          color: $title-color;
          .grade {
            padding: 0 5px;
            font-size: 12px;
            font-weight: 400;
            color: $text-color2;
          }
        }
        .movie-desc {
          font-size: 12px;
          color: $text-color2;
        }
      }
    }
  }
  .play-schedule {
    content: ' ';
    width: 100%;
    min-height: 500px;
    padding: 10px;
    box-sizing: border-box;
    background: $bg-color;
    .play-schedule-item {
      display: flex;
      align-items: center;
      padding: 18px 14px;
      margin-bottom: 10px;
      box-sizing: border-box;
      border-radius: 6px;
      background: white;
      .schedule-row {
        flex: 1;
        .row-1 {
          height: 20px;
          font-size: 14px;
          color: $title-color;
        }
        .row-2 {
          font-size: 11px;
          color: $text-color2;
        }
        .row-num {
          font-size: 15px;
          font-weight: bold;
        }
        .show-time {
          font-size: 17px;
        }
        .price {
          color: $price-color;
          // transform: scale(1, 1.1);
          display: flex;
          align-items: center;
          .vip-text {
            height: 9px !important;
            line-height: 9px;
            margin-right: 2px;
            font-size: 7px;
            font-weight: bolder;
            font-style: oblique;
            color: white;
            padding: 0 2px 0 1px;
            border-radius: 2px;
            background: $primary-btn-bg-color;
          }
        }
      }

      .sold-btn {
        color: #fff;
        font-size: 11px;
        height: 28px;
        line-height: 28px;
        padding: 0 20px;
        border-radius: 20px;
        background: $primary-btn-bg-color;
        &:active {
          background: pink;
        }
      }
    }
  }
}
</style>
